import React, { useState } from 'react'
import { Modal, Form, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import {formItemLayout} from '@contants/app'
import utils from '@utils'
import message from '@utils/message'
import css from './index.scss'

export default props => {
  let [form] = Form.useForm()
  let [cfile, setCfile] = useState(null)

  // 确认提交文件
  const onFinish = () => {
    form.validateFields()
      .then(res => {
        if (cfile) {
          let formData = new FormData()
          formData.append('file', cfile)
          utils.uploadAndDownload('/api/import/orderRemarkInfo', formData, '待发货订单模板备注结果', 'xls')
          setTimeout(() => {
            props.onOk()
          }, 1500)

        } else {
          message.error('未上传文件')
        }
      })
  }

  // 下载模板文件
  const onTemplate = () => {
    utils.download('/api/export/orderRemarkTemplate', {}, '待发货订单模板备注', 'xls')
  }

  // 上传文件
  const importFile = (e) => {
    let file = e.target.files[0]
    if (file) {
      setCfile(file)
    }
  }

  return <Modal
    title={'待发货订单备注'}
    visible={true}
    onOk={onFinish}
    onCancel={() => {
      props.onCancel()
    }}
    okText="确认"
    cancelText="取消"
  >
    <Form form={form} {...formItemLayout}>
      <Form.Item name="goodsName" label="待发货订单" extra={'支持扩展名：.xls,.xlsx'}>
        <div className={css.import}>
          {cfile ? cfile.name : null}
          <Button>
            <UploadOutlined />
            {cfile ? '更换文件' : '上传文件'}
          </Button>
          <input type="file" accept={'.xls,.xlsx'} onChange={importFile} />
        </div>
      </Form.Item>
    </Form>
    <Button type='primary' onClick={() => {
      onTemplate()
    }}>
      下载待发货订单模板备注
    </Button>
  </Modal>
}
